Vue3

1、Vue3 新特性介绍

• 重写双向数据绑定
• VDOM性能瓶颈
• Fragments
• Tree-Shaking的支持
• Composition API

1-1、重写双向绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

vue2
基于Object.defineProperty()实现

vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)方式相比有以下优势：
//丢掉麻烦的备份数据
//省去for in 循环
//可以监听数组变化
//代码更简化
//可以监听动态新增的属性；
//可以监听删除的属性 ；
//可以监听数组的索引和 length 属性；
    let proxyObj = new Proxy(obj,{
        get : function (target,prop) {
            return prop in target ? target[prop] : 0
        },
        set : function (target,prop,value) {
            target[prop] = 888;
        }
    })

1-2、Vue3 优化Vdom

• 在Vue2中,每次更新diff,都是全量对比,Vue3则只对比带有标记的,这样大大减少了非动态内容的对比消耗

patch flag 优化静态树

1
2
3
4
5
6
7

<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>Hello world!</span>
<span>{{msg}}</span>
<span>Hello world!</span>
<span>Hello world! </span>

• Vue3 编译后的 Vdom 是这个样子的

1
2
3
4
5
6
7
8

export function render(_ctx，_cache，$props，$setup，$data，$options){return (_openBlock(),_createBlock(_Fragment,null，[
_createvNode( "span", null,"Hello world ! "),
_createvNode( "span",null，"Hello world! "),
_createvNode( "span"，null，"Hello world! "),
_createvNode( "span", null，"Hello world! "),
_createVNode("span", null，_toDisplaystring(_ctx.msg)，1/* TEXT */)，
_createvNode( "span", null，"Hello world! "),
_createvNode( "span", null，"Hello world! ")]，64/*STABLE_FRAGMENT */))

• 新增了 patch flag 标记

  1 2 3 4 5 6 7 8 9 10 11 12 13

  TEXT = 1 // 动态文本节点 CLASS=1<<1,1 // 2//动态class STYLE=1<<2，// 4 //动态style PROPS=1<<3,// 8 //动态属性，但不包含类名和样式 FULLPR0PS=1<<4,// 16 //具有动态key属性，当key改变时，需要进行完整的diff比较。 HYDRATE_ EVENTS = 1 << 5，// 32 //带有监听事件的节点 STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment KEYED_ FRAGMENT = 1 << 7, // 128 //带有key属性的fragment 或部分子字节有key UNKEYED FRAGMENT = 1<< 8, // 256 //子节点没有key 的fragment NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较 DYNAMIC_SLOTS = 1 << 10 // 1024 // 动态slot HOISTED = -1 // 静态节点 BALL = -2

我们发现创建动态 dom 元素的时候，Vdom 除了模拟出来了它的基本信息之外，还给它加了一个标记： 1 /* TEXT */

这个标记就叫做 patch flag（补丁标记）

patch flag 的强大之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。

尽管 JavaScript 做 Vdom 的对比已经非常的快，但是 patch flag 的出现还是让 Vue3 的 Vdom 的性能得到了很大的提升，尤其是在针对大组件的时候。

1-3、Vue3 Fragment

• vue3 允许我们支持多个根节点

  1 2 3 4

  <template> <div>12</div> <div>23</div> </template>

• 同时支持render JSX 写法

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

  render() { return ( <> {this.visable ? ( <div>{this.obj.name}</div> ) : ( <div>{this.obj.price}</div> )} <input v-model={this.val}></input> {[1, 2, 3].map((v) => { return <div>{v}-----</div>; })} </> ); },

• 同时新增了Suspense teleport 和 多 v-model 用法

1-4、Vue3 Tree shaking

• 简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码

• 在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到

• 而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果你不使用其某些功能，它们将不会包含在你的基础包中

• 就是比如你要用watch 就是import {watch} from ‘vue’ 其他的computed 没用到就不会给你打包减少体积

1-5、Vue 3 Composition Api

• Setup 语法糖式编程
  例如 ref reactive watch computed toRefs toRaws 我们会在下面详解

2、构建项目

2-1、使用vite构建

• 命令

  1	npm init vite@latest

2-2、使用vue脚手架构建

• 命令

  1	npm init vue@latest

3、vite项目目录结构

• public 下面的不会被编译 可以存放静态资源

• assets 下面可以存放可编译的静态资源

• components 下面用来存放我们的组件

• App.vue 是全局组件

• main ts 全局的ts文件

• index.html 非常重要的入口文件 （webpack，rollup 他们的入口文件都是enrty input 是一个js文件 而Vite 的入口文件是一个html文件，他刚开始不会编译这些js文件 只有当你用到的时候 如script src=”xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件）

3-1、SFC 语法规范

• .vue 件都由三种类型的顶层语法块所组成：template、script、style

1
2

<template>
每个 *.vue 文件最多可同时包含一个顶层 <template> 块。

• 其中的内容会被提取出来并传递给 @vue/compiler-dom，预编译为 JavaScript 的渲染函数，并附属到导出的组件上作为其 render 选项。

1
2

<script>
每一个 *.vue 文件可以有多个 script 块 (不包括<script setup>)。

• 该脚本将作为 ES Module 来执行。

• 其默认导出的内容应该是 Vue 组件选项对象，它要么是一个普通的对象，要么是 defineComponent 的返回值。

1
2

<script setup>
每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)

1

该脚本会被预处理并作为组件的 setup() 函数使用，也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。

1
2

<style>
一个 *.vue 文件可以包含多个 <style> 标签。

1

<style> 标签可以通过 scoped 或 module attribute将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混合使用

4、模板语法

4-1、第一种 vue2的写法(组合式API)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
    <div>
        {{ age }}
    </div>
</template>

<script>
export default {
    data(){
        return {
            age:18
        }
    },
    methods:{
        xxx(){}
    }
  }
</script>

<style scoped>
</style>

4-2、第二种 setup函数模式

• 定义的方法和属性必须要return出去

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <template> <div> {{ age }} </div> </template> <script> export default { setup(){ const age = 18 return { age } } } </script> <style scoped> </style>

4-3、 第三种 setup语法糖

1
2
3
4
5
6
7
8
9
10
11
12

<template>
  <div>
    {{ age }}
  </div>
</template>

<script setup lang="ts">
  const age:number = 18
</script>

<style scoped>
</style>

• 支持三元运算符

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <template> <div> <!-- 页面展示true --> {{ age?"true":"false" }} </div> </template> <script setup lang="ts"> const age:number = 1 </script> <style scoped> </style>

• 支持API调用

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <template> <div> <!-- 页面展示[{ "num": 1 },{ "num": 2 },{ "num": 3 },{ "num": 4 },{ "num": 5 }] --> {{ age.map((item:any)=>{ return {num:item} }) }} </div> </template> <script setup lang="ts"> const age:number[] = [1,2,3,4,5] </script> <style scoped> </style>

5、Vue指令用法

• v- 开头都是vue 的指令

v-text

• v-text 用来显示文本

  1 2 3 4 5 6 7

  <template> <div v-text="a"></div> </template> <script setup lang="ts"> const a:string = "我是一段文字xxxx" </script>

v-html

• v-html 用来展示富文本 支持html标签 但不支持组件

  1 2 3 4 5 6 7

  <template> <div v-html="a"></div> </template> <script setup lang="ts"> const a:string = `<p style="color:blue">我叫赵四眼</p>` </script>

v-if

• v-if 用来控制元素的显示隐藏（切换真假DOM）

  1 2 3 4 5 6 7

  <template> <div v-if="a">展示</div> </template> <script setup lang="ts"> const a:boolean = true </script>

v-else-if

• v-else-if 表示 v-if 的“else if 块”。可以链式调用

  1 2 3 4 5 6 7 8

  <template> <div v-if="a==1">展示1</div> <div v-else-if="a==2">展示2</div> </template> <script setup lang="ts"> const a:number = 2 </script>

v-else

• v-else v-if条件收尾语句

  1 2 3 4 5 6 7 8 9 10

  <template> <div v-if="a==1">展示1</div> <div v-else-if="a==2">展示2</div> <!-- 如果上面两个判断都没有通过 就展示v-else的内容 --> <div v-else>展示3</div> </template> <script setup lang="ts"> const a:number = 10 </script>

v-show

• v-show 用来控制元素的显示隐藏（display none block Css切换）

  1 2 3 4 5 6 7

  <template> <div v-show="a==1">展示1</div> </template> <script setup lang="ts"> const a:number = 1 </script>

v-on

• v-on 简写@ 用来给元素添加事件

  1 2 3 4 5 6 7 8 9

  <template> <div v-on:click="xxx">尽情点击我</div> </template> <script setup lang="ts"> const xxx=()=>{ console.log("点击了xxx") } </script>

• 简写方式

  1 2 3 4 5 6 7 8 9

  <template> <div @click="xxx">尽情点击我</div> </template> <script setup lang="ts"> const xxx=()=>{ console.log("点击了xxx") } </script>

• 动态切换方式

  1 2 3 4 5 6 7 8 9 10

  <template> <div @[event]="xxx">尽情点击我</div> </template> <script setup lang="ts"> const event='click' const xxx=()=>{ console.log("点击了xxx") } </script>

• 修饰符 .stop阻止事件冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
  <div @click="parent">
    <!-- 点击子级的事件会产生冒泡 会触发父级的事件 我们只需要加上stop修饰符即可 -->
    <div @click.stop="xxx">尽情点击我</div>
  </div>
</template>

<script setup lang="ts">
const parent = () => {
  console.log("我是父级")
}
const xxx = () => {
  console.log("点击了xxx")
}
</script>

• 修饰符 .prevent阻止表单提交

  1 2 3 4 5 6 7 8 9 10 11

  <template> <form action="/"> <button @click.prevent="submit" type="submit">submit</button> </form> </template> <script setup lang="ts"> const submit = () => { console.log("child") } </script>

v-bind

• v-bind用来绑定元素的属性

  1 2 3 4 5 6 7

  <template> <div v-bind:id="id"></div> </template> <script setup lang="ts"> const id = "123" </script>

• 简写方式

  1 2 3 4 5 6 7

  <template> <div :style="style">111111</div> </template> <script setup lang="ts"> const style = "border: 1px solid #ccc; color: red;" </script>

v-model

• v-model 双向绑定

  1 2 3 4 5 6 7 8 9 10 11 12

  <template> <div> <input type="text" v-model="a"> <div>{{ a }}</div> </div> </template> <script setup lang="ts"> // ref 后面会讲到 import {ref} from "vue" const a = ref("赵四眼") </script>

v-for

• v-for 用来遍历元素

  1 2 3 4 5 6 7 8 9 10

  <template> <!-- item表示每一个元素 index表示索引 --> <div v-for="(item,index) in arr" :key="index"> {{ item }} </div> </template> <script setup lang="ts"> const arr:string[] = ['赵四眼','赵小眼','赵大眼'] </script>

v-once

• v-once性能优化只渲染一次

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <template> <!-- 标签上加了v-once之后 变量只会渲染一次 点击事件改变值 也不会重新渲染 --> <div v-once> {{ a }} </div> <button @click="xxx">点击</button> </template> <script setup lang="ts"> import {ref} from "vue" let a=ref("赵四眼") const xxx=()=>{ a.value='赵小眼' } </script>

v-memo

• 当组件重新渲染的时候，如果arr维持不变，那么对这个
  以及它的所有子节点的更新都将被跳过。事实上，即使是虚拟DOM的VNode创建也将被跳过，因为子树的记忆副本可以被重用。

  1 2 3 4 5 6 7 8 9 10 11

  <template> <!-- --> <div v-for="(item,index) in arr" :key="index" v-memo=[item]> {{ item }} </div> </template> <script setup lang="ts"> let arr=[1,2,3,4,5,6,7,8,9,10,11] </script>

6、Vue核心虚拟Dom和 diff 算法

• 为什么要学习源码
  1.可以提升自己学习更优秀的API设计和代码逻辑
  2.面试的时候也会经常问源码相关的东西
  3.更快的掌握vue和遇到问题可以定位

6-1、介绍虚拟DOM

• 虚拟DOM就是通过JS来生成一个AST节点树
• AST抽象语法树
• TS转JS的时候会使用AST

为什么要有虚拟DOM？

• 我们可以通过下面的例子

  1 2 3 4 5 6

  let div = document.createElement('div') let str = '' for (const key in div) { str += key + ' ' } console.log(str)

• 发现一个dom上面的属性是非常多的

  1

  align title lang translate dir hidden accessKey draggable spellcheck autocapitalize contentEditable enterKeyHint isContentEditable inputMode virtualKeyboardPolicy offsetParent offsetTop offsetLeft offsetWidth offsetHeight innerText outerText onbeforexrselect onabort onbeforeinput onblur oncancel oncanplay oncanplaythrough onchange onclick onclose oncontextlost oncontextmenu oncontextrestored oncuechange ondblclick ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop ondurationchange onemptied onended onerror onfocus onformdata oninput oninvalid onkeydown onkeypress onkeyup onload onloadeddata onloadedmetadata onloadstart onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onpause onplay onplaying onprogress onratechange onreset onresize onscroll onsecuritypolicyviolation onseeked onseeking onselect onslotchange onstalled onsubmit onsuspend ontimeupdate ontoggle onvolumechange onwaiting onwebkitanimationend onwebkitanimationiteration onwebkitanimationstart onwebkittransitionend onwheel onauxclick ongotpointercapture onlostpointercapture onpointerdown onpointermove onpointerrawupdate onpointerup onpointercancel onpointerover onpointerout onpointerenter onpointerleave onselectstart onselectionchange onanimationend onanimationiteration onanimationstart ontransitionrun ontransitionstart ontransitionend ontransitioncancel oncopy oncut onpaste dataset nonce autofocus tabIndex style attributeStyleMap attachInternals blur click focus inert oncontentvisibilityautostatechange onscrollend popover onbeforetoggle onbeforematch hidePopover showPopover togglePopover namespaceURI prefix localName tagName id className classList slot attributes shadowRoot part assignedSlot innerHTML outerHTML scrollTop scrollLeft scrollWidth scrollHeight clientTop clientLeft clientWidth clientHeight onbeforecopy onbeforecut onbeforepaste onsearch elementTiming onfullscreenchange onfullscreenerror onwebkitfullscreenchange onwebkitfullscreenerror role ariaAtomic ariaAutoComplete ariaBusy ariaBrailleLabel ariaBrailleRoleDescription ariaChecked ariaColCount ariaColIndex ariaColSpan ariaCurrent ariaDescription ariaDisabled ariaExpanded ariaHasPopup ariaHidden ariaInvalid ariaKeyShortcuts ariaLabel ariaLevel ariaLive ariaModal ariaMultiLine ariaMultiSelectable ariaOrientation ariaPlaceholder ariaPosInSet ariaPressed ariaReadOnly ariaRelevant ariaRequired ariaRoleDescription ariaRowCount ariaRowIndex ariaRowSpan ariaSelected ariaSetSize ariaSort ariaValueMax ariaValueMin ariaValueNow ariaValueText children firstElementChild lastElementChild childElementCount previousElementSibling nextElementSibling after animate append attachShadow before closest computedStyleMap getAttribute getAttributeNS getAttributeNames getAttributeNode getAttributeNodeNS getBoundingClientRect getClientRects getElementsByClassName getElementsByTagName getElementsByTagNameNS getInnerHTML hasAttribute hasAttributeNS hasAttributes hasPointerCapture insertAdjacentElement insertAdjacentHTML insertAdjacentText matches prepend querySelector querySelectorAll releasePointerCapture remove removeAttribute removeAttributeNS removeAttributeNode replaceChildren replaceWith requestFullscreen requestPointerLock scroll scrollBy scrollIntoView scrollIntoViewIfNeeded scrollTo setAttribute setAttributeNS setAttributeNode setAttributeNodeNS setPointerCapture toggleAttribute webkitMatchesSelector webkitRequestFullScreen webkitRequestFullscreen checkVisibility getAnimations setHTML nodeType nodeName baseURI isConnected ownerDocument parentNode parentElement childNodes firstChild lastChild previousSibling nextSibling nodeValue textContent ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECTION_NODE ENTITY_REFERENCE_NODE ENTITY_NODE PROCESSING_INSTRUCTION_NODE COMMENT_NODE DOCUMENT_NODE DOCUMENT_TYPE_NODE DOCUMENT_FRAGMENT_NODE NOTATION_NODE DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_PRECEDING DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC appendChild cloneNode compareDocumentPosition contains getRootNode hasChildNodes insertBefore isDefaultNamespace isEqualNode isSameNode lookupNamespaceURI lookupPrefix normalize removeChild replaceChild addEventListener dispatchEvent removeEventListener

• 所以直接操作DOM非常浪费性能

• 解决方案就是 我们可以用JS的计算性能来换取操作DOM所消耗的性能，既然我们逃不掉操作DOM这道坎,但是我们可以尽可能少的操作DOM

• 操作JS是非常快的

6-2、介绍Diff算法

1
2
3
4
5
6
7
8
9
10

<template>
  <div>
    <div :key="item" v-for="(item) in Arr">{{ item }}</div>
  </div>
</template>

<script setup lang="ts">
const Arr: Array<string> = ['A', 'B', 'C', 'D']
Arr.splice(2,0,'DDD')
</script>

7、ref全家桶

7-1、ref(深层次的响应式)

• 接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.value property，指向该内部值。

不使用ref

1
2
3
4
5
6
7
8
9
10
11
12

<template>
  <div>{{ mas.name }}</div>
  <button @click="xxx">修改</button>
</template>

<script setup lang='ts'>
  const mas = { name: "张三" }
  const xxx =()=>{
    mas.name = "李四"
    console.log(mas)
  }
</script>

• 结果如下
  我们这样操作是无法改变mas在页面上的值 因为mas不是响应式的无法被vue跟踪

ref用法

• 修改值的时候 必须加上.value 这是固定语法 渲染的时候不需要加

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <template> <div>{{ mas.name }}</div> <button @click="xxx">修改</button> </template> <script setup lang='ts'> import {ref} from "vue" const mas = ref({ name: "张三" }) const xxx =()=>{ mas.value.name = "李四" console.log(mas) } </script>

• 结果如下

7-2、isRef

• 判断是不是一个ref对象

  1 2 3 4 5 6 7

  import { ref,isRef } from 'vue' let message = ref("我是message") let notRef = 123 const changeMsg = () => { console.log(isRef(message)); //true console.log(isRef(notRef)); //false }

7-3、shallowRef(浅层次的响应式)

创建一个跟踪自身 .value变化的ref，但不会使其值也变成响应式的

1
2
3
4
5
6
7
8
9
10
11
12

<template>
  <hr>
  <div>{{ mas1 }}</div>
  <button @click="xxx">修改</button>
</template>

<script setup lang='ts'>
import {shallowRef} from "vue"
const mas1 = shallowRef({ name: "张三" })
const xxx =()=>{
  mas1.value.name = "王五"
}

• 我们点击修改按钮的时候 并没有发生修改 原因是shallowRef是浅层响应式 只能跟踪.value 不能跟踪.value中的属性

正确写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<template>
  <hr>
  <div>{{ mas1 }}</div>
  <button @click="xxx">修改</button>
</template>

<script setup lang='ts'>
  import {shallowRef} from "vue"
  const mas1 = shallowRef({ name: "张三" })
  const xxx =()=>{
    mas1.value={
      name:"王五"
    }
  }
</script>

注意

• ref和shallowRef是不能一块写的 不然会影响shallowRef 造成视图的更新

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <template> <div>Ref:{{ mas }}</div> <hr> <div>shallowRef:{{ mas1 }}</div> <button @click="xxx">修改</button> </template> <script setup lang='ts'> import {ref,shallowRef} from "vue" const mas = ref({ name: "张三" }) const mas1 = shallowRef({ name: "张三" }) const xxx =()=>{ mas.value.name = "李四" mas1.value.name = "王五" } </script>

• 当我们点击修改按钮的时候 即便shallowRef是浅层响应式 也会被ref影响到

7-4、triggerRef

• 强制更新页面DOM

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  <template> <hr> <div>shallowRef:{{ mas1 }}</div> <button @click="xxx">修改</button> </template> <script setup lang='ts'> import {shallowRef,triggerRef} from "vue" const mas1 = shallowRef({ name: "张三" }) const xxx =()=>{ mas1.value.name = "王五" // 本来shallowRef这个值是不会被修改的 triggerRef(mas1) // 但是我们加上triggerRef 他会帮我们强制更新 } </script>

7-5、customRef

• 自定义ref 类似ref的源码

• customRef 是个工厂函数要求我们返回一个对象 并且实现 get 和 set 适合去做防抖之类的

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

  <template> <hr> <div>{{ obj }}</div> <button @click="xxx">修改</button> </template> <script setup lang='ts'> import {customRef} from "vue" function myRef<T>(value:T){ return customRef((track,trigger)=>{ return { get(){ // 收集依赖 track() return value }, set(newVal){ // 修改 value = newVal trigger() // 强制更新 } } }) } const obj=myRef<string>('张三') const xxx =()=>{ obj.value="李四" } </script>

• customRef结合防抖

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

  <template> <hr> <div>{{ obj }}</div> <button @click="xxx">修改</button> </template> <script setup lang='ts'> import { customRef } from "vue" let time:any function myRef<T>(value: T) { return customRef((track, trigger) => { return { get() { // 收集依赖 track() return value }, set(newVal) { // 修改 clearTimeout(time) time = setTimeout(() => { console.log("触发了") value = newVal trigger() // 强制更新 time=null },500) } } }) } const obj = myRef<string>('张三') const xxx = () => { obj.value = "李四" } </script>

7-6、ref小知识

• 我们log输出以下

  1 2 3

  import { ref } from "vue" const mas = ref<string>("string") console.log(mas)

• 这个格式 查看起来很不方便

  

• Vue 已经想到 了 帮我们做了格式化

7-7、ref获取dom元素

• 你获取元素声明的变量名要和元素上ref的属性名一样

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <template> <hr> <div ref="dom">我是张三</div> <button @click="xxx">点击</button> </template> <script setup lang='ts'> import { ref } from "vue" const dom = ref<HTMLDivElement>() const xxx=()=>{ console.log(dom.value) // <div>我是张三</div> } </script>

8、reactive全家桶

8-1、reactive

• reactive 是不可以绑定普通的数据类型这样是不允许 会给我们报错
• 绑定普通的数据类型 我们可以 使用ref
• 你如果用ref去绑定对象或者数组等复杂的数据类型 其实也是去调用reactive
• ref支持所有的类型 reactive支持引用类型 Array Object Map Set
• ref 取值、赋值 都需要加.value reactive不需要.value

对象写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <form>
    <input type="text" v-model="form.name">
    <br>
    <input type="text" v-model="form.age">
    <br>
    <button @click.prevent="xxx">提交</button>
  </form>
</template>

<script setup lang='ts'>
import { reactive } from "vue"
type M = {
  name: string,
  age: number,
}
const form = reactive<M>({
  name:"zs",
  age:18
})
const xxx=()=>{
  console.log(form)
}
</script>

数组写法

• 使用reactive需要注意的问题

• 数组异步赋值问题

• 这样赋值页面是不会变化的 因为会脱离响应式

  1 2 3 4 5

  let arr = reactive<string[]>([]) const xxx = () => { let res = ['WBG', 'IG', 'TES'] arr = res // reactive不可以直接赋值 }

• reactive是proxy类型的 不能直接赋值 否则会破坏响应式对象的

• 解决方案1 数组 push加解构

  1 2 3 4 5

  let arr = reactive<string[]>([]) const xxx = () => { let res = ['WBG', 'IG', 'TES'] arr.push(...res) }

• 解决方案2 包裹一层对象

  1 2 3 4 5 6 7 8

  let person = reactive({ list:[] }) setTimeout(() => { const arr = [1, 2, 3] person.list = arr; console.log(person); },1000)

8-2、readonly

• 只读

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  <template> <button @click="xxx">查看</button> </template> <script setup lang='ts'> import { reactive,readonly} from "vue" let obj = reactive({ name:"张三" }) let read = readonly(obj) read.name = "李四" // 报错 无法为“name”赋值，因为它是只读属性 const xxx = () => { console.log(obj) // name: "张三" console.log(read) // name: "张三" } </script>

8-3、shallowReactive

• 只能对浅层的数据 如果是深层的数据只会改变值 不会改变视图
• 和shallowRef一样 也会被reactive影响

  1 2 3 4 5 6 7 8 9 10 11 12 13

  import { shallowReactive } from "vue" let obj = shallowReactive({ foo:{ bar:{ num:1 } } }) const xxx = () => { obj.foo.bar.num = 2 console.log(obj) // 值改变了 但是视图没变 }

9、to系列全家桶(toRef、toRefs、toRaw)

9-1、toRef

• 如果原始对象是非响应式的就不会更新视图 数据是会变的
• toRef只能修改响应式对象的值 非响应式视图毫无变化

  1 2 3 4 5 6 7

  import { reactive, toRef } from "vue" const man = reactive({ name: "赵四眼", age: 20 }) const name = toRef(man,"name") const xxx=()=>{ name.value = "zzm" // toRef只能修改响应式对象的值 console.log(man) }

• 应用场景
  • 比如一个函数需要一个参数 而那个参数还是reactive中的值 我们就可以使用toRef

    1 2 3 4 5 6 7

    const man = reactive({ name: "赵四眼", age: 20 }) function useMemo(aaa:any){ console.log(aaa) } useMemo(toRef(man,"name"))

9-2、toRefs

• 可以帮我们批量创建ref对象主要是方便我们解构使用

  1 2 3 4 5 6 7 8 9 10 11

  import { reactive, toRefs } from 'vue' const obj = reactive({ foo: 1, bar: 1 }) let { foo, bar } = toRefs(obj) // 点击事件 const xxx=()=>{ foo.value = 10 // 视图更新 } console.log(foo, bar); // 解构出来的值 也是响应式对象

• 不可以直接解构 直接解构出的值 是没有响应式的

1
2
3
4
5
6
7
8
9
10
11

import { reactive } from 'vue'
const obj = reactive({
    foo: 1,
    bar: 1
})
let { foo, bar } = obj
// 点击事件
const xxx=()=>{
  foo = 10 // 视图不会更新
}
console.log(foo, bar); // 解构出来的值 是普通属性

• 分析源码

1
2
3
4
5
6
7
8

const toRefs=<T extends object>(object:T){
  const map:any = {}
  for(let key in object){
    // 对你传入的对象中每一个属性执行了一遍toRef
    map[key] = toRef(object,key)
  }
  return map
}

9-3、toRaw

• 响应式对象转普通对象

  1 2 3 4 5 6 7 8 9

  import { reactive,toRaw } from 'vue' const man = reactive({ name:"zzm", age:18, like:"蛋仔" }) let obj = toRaw(man) console.log(obj); // {name: 'zzm', age: 18, like: '蛋仔'}

10、认识computed计算属性

10-1、computed用法

• 计算属性就是当依赖的属性的值发生变化的时候，才会触发他的更改，如果依赖的值，不发生变化的时候，使用的是缓存中的属性值。

选项式写法 支持一个对象传入get函数以及set函数自定义操作 可以修改值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName">
    </div>
    <div>
      名：<input type="text" v-model="lastName">
    </div>
    <div>
      全名：{{ name }}
    </div>
    <button @click="xxx">修改</button>
  </div>
</template>

<script setup lang='ts'>
  import { computed, ref } from "vue"
  let firstName = ref("张")
  let lastName = ref("三")

  let name = computed<string>({
    get(){
      return firstName.value+""+lastName.value
    },
    set(newVal){ // set方法能接收到name改变后的值
      console.log(newVal); // 赵-四眼
      [firstName.value, lastName.value]=newVal.split('-')
    }
  })
  // 点击修改姓名事件
  const xxx=()=>{
    name.value="赵-四眼"
  }
</script>

函数式写法 只能支持一个getter函数 不允许修改值的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName">
    </div>
    <div>
      名：<input type="text" v-model="lastName">
    </div>
    <div>
      全名：{{ name }}
    </div>
  </div>
</template>

<script setup lang='ts'>
  import { computed, ref } from "vue"
  let firstName = ref("张")
  let lastName = ref("三")

  // 2、函数式写法 只读的
  let name=computed(()=>{
    return firstName.value+""+lastName.value
  })
</script>

购物车小案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<template>
  <div>
    <div>
      <input v-model="keyWord" type="text" placeholder="搜索">
    </div>
    <div style="margin-top: 20px;">
      <table>
        <thead>
          <tr>
            <th>物品名称</th>
            <th>物品单价</th>
            <th>物品数量</th>
            <th>物品总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in searchData">
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
              <!-- 如果item.num大于1 每点击一次就-1 否则什么都不做 -->
              <button @click="item.num > 1 ? item.num-- : null">-</button>
              {{ item.num }}
              <!--  每点击一次就+1 -->
              <button @click="item.num++">+</button>
            </td>
            <td>{{ item.num * item.price }}</td>
            <td @click="del(index)">删除</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5" align="right">
              总价：{{ total }}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script setup lang='ts'>
  import { ref, computed, reactive } from "vue"
  interface Data {
    name: string,
    price: number,
    num: number
  }
  let keyWord = ref<string>("")

  let data = reactive<Data[]>([
    {
      name: "zzm的绿帽子",
      price: 999,
      num: 10
    },
    {
      name: "zzm的破裤头",
      price: 90,
      num: 2
    },
    {
      name: "zzm本人",
      price: 10000,
      num: 1
    }
  ])
  // 删除
  const del = (index: number) => {
    data.splice(index, 1)
  }
  // 总价
  const total = computed(() => {
    return data.reduce((pre: number, next: Data) => {
      return pre + next.num * next.price
    }, 0)
  })
  // 搜索
  const searchData = computed(() => {
    return data.filter((item: Data) => {
      return item.name.includes(keyWord.value)
    })
  })
</script>

11、认识watch监听器

• watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用
• watch第一个参数监听源
• watch第二个参数回调函数cb（newVal,oldVal）
• watch第三个参数一个options配置项是一个对象{
  immediate:true //是否立即调用一次
  deep:true //是否开启深度监听
  }

监听Ref 案例

1
2
3
4
5
6

import { watch, ref } from "vue"
let message = ref<string>("zzm")

watch(message, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

监听多个Ref案例 注意变成数组啦

1
2
3
4
5
6
7

  import { watch, ref } from "vue"
  let message1 = ref<string>("zzm")
  let message2 = ref<string>("赵四眼")
  watch([message1,message2], (newVal, oldVal) => {
    console.log("新的值--",newVal) // 新的值-- (2) ['zzm1', '赵四眼']
    console.log("旧的值--",oldVal) // 旧的值-- (2) ['zzm', '赵四眼']
})

监听复杂类型Ref案例 需要开启深度监听

• deep:true 深度监听

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  import { watch, ref } from "vue" let message = ref({ foo:{ bar:{ name:"zzm" } } }) watch(message, (newVal, oldVal) => { console.log("新的值--",newVal) console.log("旧的值--",oldVal) },{ deep: true, // 深度监听 })

监听reactive

• 使用reactive监听深层对象开启和不开启deep 效果一样
• 不开启深度监听 也是可以监听到的

  1 2 3 4 5 6 7 8 9 10 11 12 13

  import { ref, watch ,reactive} from 'vue' let message = reactive({ nav:{ bar:{ name:"" } } }) watch(message, (newVal, oldVal) => { console.log('新的值----', newVal); console.log('旧的值----', oldVal); })

监听reactive 单一值

• 如果要监听单一值 我们需要把他变成一个函数

  1 2 3 4 5 6 7 8 9 10 11 12 13

  import {watch ,reactive} from 'vue' let message = reactive({ foo:{ bar:{ name:"zzm" } } }) // 将这个单一值变为函数 watch(()=>message.foo.bar.name, (newVal, oldVal) => { console.log('新的值----', newVal); console.log('旧的值----', oldVal); })

首次执行一次

• watch数据没发生改变是不会执行的 我们可以开启immediate:true 让它立即执行一次

  1 2 3 4 5 6 7 8

  import { watch, ref } from "vue" let message = ref<string>("zzm") watch(message, (newVal, oldVal) => { console.log(newVal, oldVal) }，{ immediate:true // 立即调用一次 })

wacth的options配置项的方法

1
2
3
4
5
6
7

watch(监听的数据, (新的值, 旧的值) => {
    console.log(新的值, 旧的值)
  }，{
    deep:true // 深度监听
    immediate:true // 立即调用一次
    flush:"pre" // pre 组件更新之前调用 sync 同步执行 post 组件更新之后执行
  })

12、认识watchEffect高级侦听器

• 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

基本用法

• 如果用到message 就只会监听message 就是用到几个监听几个 而且是非惰性 会默认调用一次

  1 2 3 4 5 6 7

  import {ref, watchEffect} from "vue" let message = ref<string>("zzm") // 当massage改变时 就会被watchEffect监听到 // 默认会执行一次 watchEffect(()=>{ console.log("message",message.value) })

清除副作用

• 就是在触发监听之前会调用一个函数可以处理你的逻辑例如防抖

  1 2 3 4 5 6 7 8 9 10

  import {ref, watchEffect} from "vue" let message = ref<string>("zzm") watchEffect((oninvalidate)=>{ console.log("message",message.value) // 清除副作用 oninvalidate(()=>{ }) })

停止监听

• 停止跟踪 watchEffect 返回一个函数 调用之后将停止更新

  1 2 3 4 5 6 7

  import {ref, watchEffect} from "vue" let message = ref<string>("zzm") const stop = watchEffect(()=>{ console.log("message",message.value) }) stop() //停止监听

配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
  <div id="dom"></div>
</template>

<script setup lang='ts'>
  import {watchEffect} from "vue"

  watchEffect(()=>{
    const dom = document.querySelector("#dom")
    console.log(dom) // <div id="dom"></div>
  },{
    flush:"post" // pre 组件更新之前调用(就是组件初始化dom完成之前执行) sync 同步执行 post 组件更新之后执行(就是组件初始化dom完成之后执行)
  })
</script>

onTrigger 可以帮助我们调试 watchEffect

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
 
    })
    console.log('message2', message2.value);
},{
    flush:"post",
    onTrigger () {
        debugger
    }
})

13、认识组件和生命周期

13-1、组件基础

• 每一个.vue 文件呢都可以充当组件来使用

• 每一个组件都可以复用

• 先创建一个.vue文件

• 父组件使用

• 页面效果

13-2、生命周期

• onBeforeMount()
  在组件DOM实际渲染安装之前调用。在这一步中，根元素还不存在。
• onMounted()
  在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问
• onBeforeUpdate()
  数据更新时调用，发生在虚拟 DOM 打补丁之前。
• onUpdated()
  DOM更新后，updated的方法即会调用。
• onBeforeUnmount()
  在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
• onUnmounted()
  卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
// beforeCreate created setup语法糖模式是没有这两个生命周期的 setup去替代

// 首先执行setup
console.log("setup")

// 创建的钩子
onBeforeMount(()=>{
  console.log("创建之前========>")
})
onMounted(()=>{
  console.log("创建完成========>")
})

// 更新的钩子
onBeforeUpdate(()=>{
  console.log("更新之前========>")
})
onUpdated(()=>{
  console.log("更新完成========>")
})

// 销毁的钩子
onBeforeUnmount(()=>{
  console.log("销毁之前========>")
})
onUnmounted(()=>{
  console.log("销毁完成========>")
})

页面加载完毕

获取dom

• onBeforeMount 读不到dom onMounted 可以读取dom

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  <template> <h1>我是子组件</h1> <div ref="dom"></div> </template> <script setup lang="ts"> import {ref,onBeforeMount,onMounted} from "vue" const dom = ref<HTMLDivElement>() // 创建的钩子 onBeforeMount(()=>{ console.log("创建之前========>",dom) // 创建之前========> undefined }) onMounted(()=>{ console.log("创建完成========>",dom) // 创建完成========> <div> }) </script>

触发更新的钩子

• onBeforeUpdate 获取更新之前的dom onUpdated 获取更新之后的dom

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  <template> <h1>我是子组件</h1> <div ref="dom">{{ str }}</div> <button @click="xxx">修改</button> </template> <script setup lang="ts"> import {ref,onBeforeUpdate,onUpdated} from "vue" const str = ref<string>("zzm") const dom = ref<HTMLDivElement>() const xxx=()=>{ str.value = "111" } // 更新的钩子 onBeforeUpdate(()=>{ console.log("更新之前========>",dom.value?.innerText) // 更新之前========> zzm }) onUpdated(()=>{ console.log("更新完成========>",dom.value?.innerText) // 更新完成========> 111 }) </script>

触发销毁钩子

• 我们对子组件进行销毁和重建 就会触发子组件中的销毁钩子

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <template> <HelloWorld v-if="flag"/> <button @click="xxx">销毁 重建</button> </template> <script setup lang='ts'> import HelloWorld from "./components/HelloWorld.vue" import {ref} from "vue" const flag = ref<boolean>(true) const xxx = () =>{ flag.value = !flag.value } </script>

其他

import {onRenderTriggered,onRenderTracked} from “vue”

1
2
3
4
5
6
7
8

// 获取依赖
onRenderTracked((e)=>{
  console.log(e)
})
// 获取修改后的依赖
onRenderTriggered((e)=>{
  console.log(e)
})

14、父子组件传参

14-1、父传子

• 父组件通过v-bind绑定一个数据，然后子组件通过defineProps接受传过来的值，

• 如以下代码

• 给子组件Son传递了一个title字符串类型和arr数组类型

  1 2 3 4 5 6 7 8 9

  <template> <h1>父级</h1> <son :title="tit" :arr="[1,2,3]"/> </template> <script setup lang='ts'> import Son from './components/Son.vue'; let tit = "zzm" </script>

• 子组件接收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
    <h2>子级</h2>
    <!-- 在模板中可以直接使用title属性 -->
    <div>接收的值：{{ title }}</div>
</template>

<script setup lang='ts'>
// 接收父组件传来的值
// JS方式接收
const props=defineProps({
    title:{
        type:String,
        default:"默认值",
    },
    arr:{
        type:Array,
        default:null
    }
})
// console.log(title) 不能直接读取
console.log(props.title) // zzm


// TS方式接收
const props=defineProps<{
    title:string,
    arr:number[]
}>()
console.log(props)

// TS设置默认值 TS特有的
withDefaults(defineProps<{
    title:string,
    arr:number[]
}>(),{
    arr:()=>[1,2,3,4]
})

</script>